<template>
    <div id="home" class="wrapper">
        <nav-bar class="home-nav">
            <template slot="center">
                <div>蘑菇街女装</div>
            </template>
        </nav-bar>
        <tab-control :titles="['流行', '款式' , '精选']" @tabclick="tabclick"
                     ref="toptabcontrol" v-show="isshowtabcontrol"></tab-control>


        <scroll class="content" ref="scroll" :probe-type="3"
                :pull-up-load="true"
                @pullingUp="loadMore"
                @scroll="contentscroll">
            <home-swiper :banner="banner" @swiperImgLoad="swiperImgLoad"></home-swiper>
            <recommend-view :recommend="recommend"></recommend-view>
            <feature-view></feature-view>
            <tab-control :titles="['流行', '款式' , '精选']" @tabclick="tabclick"
                         ref="tabcontrol"></tab-control>
            <goods-list :goods="goods[currenttype].list"></goods-list>
        </scroll>
        <back-top @click.native="backclick" v-show="isshow"></back-top><!--        native监听根组件的事件，组件是无法直接触发点击的-->


    </div>

</template>

<script>
    //子组件区域
    import HomeSwiper from './childComps/HomeSwiper'
    import RecommendView from './childComps/RecommendView'
    import FeatureView from './childComps/featureview'
    //公共区域
    import NavBar from '../../components/common/navbar/NavBar'
    import TabControl from '../../components/content/tabcontrol/TabControl'
    import GoodsList from '../../components/content/goods/goodslist'
    import GoodsListItem from '../../components/content/goods/goodslistitem'
    import Scroll from '../../components/common/scroll/Scroll'
    import BackTop from '../../components/content/backTop/backtop'


    import {getHomeMultidata, getHomeGoods} from "../../network/home";


    export default {
        name: 'Home',
        components: {
            FeatureView,
            HomeSwiper,
            RecommendView,

            NavBar,
            TabControl,
            GoodsList,
            GoodsListItem,
            Scroll,
            BackTop


        },
        data() {
            return {
                banner: [],
                recommend: [],
                goods: {
                    'pop': {page: 0, list: []},
                    'new': {page: 0, list: []},
                    'sell': {page: 0, list: []},
                },
                //默认tabcontrol为pop界面
                currenttype: 'pop',
                isshow: false,
                taboffsetTop: 0,
                isshowtabcontrol: false,
                saveY: 0


            }
        },


        //发送网络请求
        created() {
            this.getHomeMultidata1()

            //请求商品数据
            this.getHomeGoods1('pop')
            this.getHomeGoods1('new')
            this.getHomeGoods1('sell')

            //接收发射出来的img加载事件  监听是否加载成功
            // this.$bus.$on('itemimgload',() => {
            //     console.log('bus')
            // }) vue3需要下载插件mitt
        },
        computed: {
            mounted() {
            },

            destroyed() {

            },
        },
        activated() {
            this.$refs.scroll.scroll.scrollTo(0, this.saveY, 0)
            //最好在重新滚动的时候刷新一次滚动的距离refresh
            this.$refs.scroll.scroll.refresh()
        },
        deactivated() {
            this.saveY = this.$refs.scroll.scroll.y
            //this.$refs.scroll.scroll.y离开时的bettscroll滚动的y值

        },


        methods: {
            //事件监听的方法
            tabclick(index) {
                switch (index) {
                    case 0:
                        this.currenttype = 'pop'
                        break
                    case 1:
                        this.currenttype = 'new'
                        break
                    case 2:
                        this.currenttype = 'sell'
                        break
                }
                //让两个组件的currentIndex相对应  解决tabbarcontrol的bug
                this.$refs.toptabcontrol.currentIndex = index
                this.$refs.tabcontrol.currentIndex = index
            },
            backclick() {
                //获取scroll中的scrollTo设定它的滚动距离
                this.$refs.scroll.scroll.scrollTo(0, 0, 500)
            },
            contentscroll(position) {
                //判断往上滚动条是否显示
                this.isshow = (-position.y) > 1000
                //决定tabcontrol是否显示
                this.isshowtabcontrol = (-position.y - 30) > this.taboffsetTop

            },
            loadMore() {
                //记录加载的对象和当前点击的类型页
                //getHomeGoods1每一次的调用都会将page页数加一
                this.getHomeGoods1(this.currenttype)

                //每一次加载的时候 重新记录一下所有可滚动的区域
                // 实际上就是实时更新这个scroll里面的scrollHeight属性
                // console.log(this.$refs.scroll.scroll.scrollHeight)
                this.$refs.scroll && this.$refs.scroll.scroll.refresh()
                //逻辑判断，判断scroll是否已经加载有值了。没有则为null不执行   免得报错

            },
            swiperImgLoad() {
                //实时监听tabcontrol的滚动高度  重点$el
                this.taboffsetTop = this.$refs.tabcontrol.$el.offsetTop
            },


            // 网络请求的方法
            getHomeMultidata1() {
                //请求多个数据    这里是异步操作，不能在下方打印
                getHomeMultidata().then(res => {
                    this.banner = res.data.data.banner.list
                    this.recommend = res.data.data.recommend.list

                })
            },
            getHomeGoods1(type) {
                const page = this.goods[type].page + 1
                getHomeGoods(type, page).then(res => {
                    // console.log(res)
                    //...是ES6结构的新语法，可以遍历整个数组
                    this.goods[type].list.push(...res.data.data.list)
                    //拿到数据后，页码加一
                    this.goods[type].page += 1
                    //完成下拉加载更多的操作
                    this.$refs.scroll.finishPullUp()

                })
            }


        }

    }
</script>

<style scoped>
    #home {
        /*padding-top: 44px;*/
        height: 100vh;
        position: relative;
    }

    .home-nav {
        background-color: #CC3399;
        color: floralwhite;
        /*position: fixed;*/
        /*left: 0;*/
        /*right: 0;*/
        /*top: 0;*/
        /*z-index: 9;*/
    }

    /*.tab-control {*/
    /*    position: sticky; !*h5吸顶效果   必须加个top*!*/
    /*    top: 44px;*/
    /*    z-index: 99;*/
    /*}*/

    /*.content{*/
    /*    !*overflow: hidden;*!*/
    /*    position: absolute;*/
    /*    top: 44px;*/
    /*    bottom: 49px;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*}*/

    .content {
        height: calc(100% - 93px);
        overflow: hidden;
        position: fixed;

        /*margin-top: 44px;*/
    }

</style>